<!-- <a routerLink="/user/edit" class="oc-add-btn" [mdl-tooltip]="'添加用户'" mdl-button mdl-button-type="fab" mdl-colored="accent"
mdl-ripple>
<mdl-icon>add</mdl-icon>
</a> -->
<!-- <div class="search-box">
  <mdl-textfield class="search-input" type="text" label="姓名" [(ngModel)]="searchRequest.userName" placeholder="填写搜索姓名" autofocus></mdl-textfield>
  <mdl-textfield class="search-input" type="text" label="手机号" [(ngModel)]="searchRequest.mobile" placeholder="填写搜索手机号" autofocus></mdl-textfield>
  <button mdl-button mdl-button-type="icon" mdl-colored="primary" (click)="search()">
  <mdl-icon>search</mdl-icon>
</button>
</div> -->
<div class="page-container">
  <div class="data-table-container">
    <ngx-datatable [rows]="rows" [selected]="selected" [selectionType]="'checkbox'" [columns]="columns" [headerHeight]="40" [rowHeight]="40"
      [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'" [externalPaging]="true" [messages]="pagerMessage" [count]="count"
      [offset]="offset" [loadingIndicator]="isPageLoading" [limit]="limit" (page)='onPage($event)' class="material fullscreen">
      <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false" [headerCheckboxable]="true"
        [checkboxable]="true"></ngx-datatable-column>
      <ngx-datatable-column name="id">
        <ng-template let-column="column" ngx-datatable-header-template>
          Id
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="userName">
        <ng-template let-column="column" ngx-datatable-header-template>
          姓名
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="gender">
        <ng-template let-column="column" ngx-datatable-header-template>
          性别
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value === 1 ? '男' : '女' }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="mobile">
        <ng-template let-column="column" ngx-datatable-header-template>
          手机号
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          <!-- {{ value.buildingNumber }} -->
          {{ value }}
        </ng-template>
      </ngx-datatable-column>
      <!-- <ngx-datatable-column name="photos">
      <ng-template let-column="column" ngx-datatable-header-template>
        是否有照片
      </ng-template>
      <ng-template let-value="value" ngx-datatable-cell-template>
        {{ value && value.length > 0 ? '是' : '否' }}
      </ng-template>
    </ngx-datatable-column> -->
      <ngx-datatable-column name="email">
        <ng-template let-column="column" ngx-datatable-header-template>
          Email
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value }}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="managements">
        <ng-template let-column="column" ngx-datatable-header-template>
          管理资产名
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value && value[0] && value[0].managable ? value[0].managable.name: ''}}
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="type">
        <ng-template let-column="column" ngx-datatable-header-template>
          类型
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          {{ value }}
          <!-- {{ value && value[0] && value[0].manage_type ? (value[0].manage_type == 'App\Services\Project\Project' ? '物业': '公司管理员(hr)')
        : '' }} -->
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="status">
        <ng-template let-column="column" ngx-datatable-header-template>
          状态
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          <!-- <span class="mdl-chip mdl-chip--contact"> -->
          <!-- <span [ngClass]="{'mdl-color--teal': value===1, 'mdl-color--pink-red' : value===-1, 'mdl-color--orange': value===0}" class="mdl-chip__contact mdl-color-text--white">
            {{ value===1 ? 'A' : (value===-1 ? 'B' : 'N')}}
        </span> -->
          <span [ngStyle]="{'padding': '8px', color: '#FFF'}" [ngClass]="{'mdl-color--teal': value===1, 'mdl-color--pink-red' : value===-1, 'mdl-color--orange': value===0}"
            class="mdl-chip__text">{{ value===1 ? '已审核' : (value===-1 ? '屏蔽' : '未审核')}}</span>
          <!-- </span> -->
        </ng-template>
      </ngx-datatable-column>
      <ngx-datatable-column name="id">
        <ng-template let-column="column" ngx-datatable-header-template>
          操作
        </ng-template>
        <ng-template let-value="value" ngx-datatable-cell-template>
          <!-- <a routerLink="/manage-edit/{{ value }}" class="table-action-btn">
            <mdl-icon class="icon material-icons" mdl-tooltip-position="left" [mdl-tooltip]="edit">remove_red_eye</mdl-icon>
            <mdl-tooltip #edit="mdlTooltip">
              编辑
            </mdl-tooltip>
          </a> -->
          <a (click)="delete(value)" class="table-action-btn app-delete-btn" [mdl-tooltip]="'删除'">
            <!-- <i class="material-icons">clear</i> -->
            <mdl-icon class="icon material-icons" mdl-tooltip-position="left">delete</mdl-icon>
          </a>
        </ng-template>
      </ngx-datatable-column>
    </ngx-datatable>
    <div class="btn-container" *ngIf="selected.length">
      <button mdl-button mdl-button-type="raised" mdl-colored="primary" mdl-ripple (click)="unlockAccount()">
        <mdl-icon class="icon material-icons" mdl-tooltip-position="left">lock_open</mdl-icon>
        开通账号
      </button>
      <button mdl-button mdl-button-type="raised" mdl-colored="accent" mdl-ripple (click)="lockAccount()">
        <mdl-icon class="icon material-icons" mdl-tooltip-position="left">lock</mdl-icon>
        冻结账号
      </button>
    </div>
  </div>
</div>